<template name="home">
	<view>
		<scroll-view>
			<!-- 轮播 -->
			<swiper   class="screen-swiper square-dot" style="height: 100px" :indicator-dots="true" :circular="true"
			 :autoplay="true" interval="5000" duration="500" :style="[{animation: 'show 0.2s 1'}]">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-else-if="item.type=='video'"></video>
          <view v-else style="display: flex;justify-content: center;align-items: center;height: 100%" class="UCenter-bg">
            <h2>通学宝典</h2>
          </view>
				</swiper-item>
			</swiper>

      <app-tabs   v-if="hytag==''" v-model="tab.idx" @change="onTabChange" :tabs="treeData.map(m => ({name: '英雄展示', value:  '11'}))"></app-tabs>

     <app-tabs   v-else v-model="tab.idx" @change="onTabChange" :tabs="treeData.map(m => ({name: m.title, value: m.id}))"></app-tabs>

		<view  v-if="!withPermission" style="text-align: center;line-height: 50vh;font-size: 16px;">
     {{hytag}}
		</view>
		<view   v-else >
			<view v-for="(info, idx) in tabChildren">
			  <view class="cu-bar bg-white solid-bottom" :class="!idx ? undefined : 'margin-top'" :style="[{animation: 'show 0.5s 1'}]" @click="openMenu(info)">
			    <view class="action">
			      <text class='cuIcon-title text-blue'></text>{{info.title}}
			    </view>
			  </view>
			  <view class="cu-list grid col-2 text-sm" v-if="menu.value === info.id" style="padding-top: 15px">
			    <block v-if="video.dataSource && video.dataSource.length">
			      <view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.05 + 's'}]" v-for="(item,index) in video.dataSource" :key="item.id" @tap="goPage(item.page)">
			        <view class="padding text-center" style="padding: 50%;position: relative">
			          <view style="width: 100%;height: 100%;position: absolute;left: 0;top: 0" :style="[{padding: !(index % 2) ? '0 7.5px 15px 15px' : '0 15px 15px 7.5px'}]">
			            <view style="position: relative;width: 100%;height: 100%;overflow: hidden;border-radius: 5px;box-shadow: 0px 0px 4px 0px #00000044">
			              <template v-if="playId !== item.id">
			                <image :src="staticDomainURL + item.imgUrl" style="width: 100%;height: 100%;">
			                  <view class="cu-tag badge margin-top-sm" style="margin-left:1.2em" v-if="getTtemDotInfo(item)">
			                    <block v-if="getTtemDotInfo(item)">{{getTtemDotInfo(item)}}</block>
			                  </view>
			                </image>
			                <view class="cuIcon-playfill cus-playfill" @click="playVideo(item)"></view>
			                <view class="margin-top-xs" style="position: absolute;z-index: 2;color: #fff;bottom: 0px;left: 0px;width: 100%;text-align: left;padding: 7px 10px;background: linear-gradient(0, #000000aa, transparent);">
			                  <view style="font-weight: 700">{{item.name}}</view>
			                  <view style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 10px">{{item.remark}}</view>
			                </view>
			              </template>
			              <template v-else>
			                <video style="width: 100%;height: 100%" :src="apiUrl.replace('jeecg-boot', '') + item.videoUrl" autoplay></video>
			              </template>
			            </view>
			          </view>
			        </view>
			      </view>
			    </block>
			    <view v-else class="cu-item animation-slide-bottom" style="padding-bottom: 15px">
			      后续教程视频等待上传
			    </view>
			  </view>
			</view>
			
			
		</view>

      <view v-if="hytag==''" class="bg-img bg-mask flex align-center" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414upx;">
        <view class="padding-xl text-white">
          <view class="padding-xs text-xxl text-bold">
            钢铁之翼
          </view>
          <view class="padding-xs text-lg">
            Only the guilty need fear me.
          </view>
        </view>
      </view>
      <view v-if="hytag==''" class="bg-img bg-mask flex align-center" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big80002.jpg');height: 414upx;">
        <view class="padding-xl text-white">
          <view class="padding-xs text-xxl text-bold">
            阿特瑞斯
          </view>
          <view class="padding-xs text-lg">
            They are privileged to die at my feet.
          </view>
        </view>
      </view>
      <view v-if="hytag==''" class="bg-img bg-mask flex align-center" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big40008.jpg');height: 414upx;">
        <view class="padding-xl text-white">
          <view class="padding-xs text-xxl text-bold">
            迦娜
          </view>
          <view class="padding-xs text-lg">
            The power of the wind is at your command.
          </view>
        </view>
      </view>
      
			<!-- 其他服务 -->
			<view class="cu-bar bg-white solid-bottom margin-top"  :style="[{animation: 'show 0.6s 1'}]" v-if="false">
				<view class="action">
					 <text class='cuIcon-title text-yellow'></text>其他服务
				</view>
			</view>
			<view class="cu-list grid col-4 text-sm" v-if="false">
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in osList" :key="index" @tap="goPage(item.page)">
					<view class="padding text-center">
						<image :src="item.icon" style="width:28px;height:28px;"/>
						<view class="margin-top-xs">{{item.title}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="cu-tabbar-height margin-top"></view>
	</view>
</template>

<script>
	import { us,os } from '@/common/util/work.js'
	import socket from '@/common/js-sdk/socket/socket.js'
  import AppTabs from "../../components/mescroll-uni/app-tabs.vue";
  import configService from'@/common/service/config.service.js'
  import {mapGetters} from "vuex";

	export default {
		name: 'home',
    components: {AppTabs},
		props:{
			cur:String,
		},
		watch: {
			cur: {
				immediate: true,
				handler:function(val,oldVal){
					console.log('cur',val,oldVal)
				    this.initMenu()
				},
			},
		},
		data() {
			return {

        hytag: "",
        hyUrl:'/authority/xcx/hy',
			 swiperList: [
				  {id:1,type: 'text',url: '', link: ''},
				  {id:2,type: 'text',url: '', link: ''},
				  {id:3,type: 'text',url: '', link: ''},
				  {id:4,type: 'text',url: '', link: ''},
				],
				middleApps: [
				  {icon: 'line2_icon1.png', title: '审批', 'text': '个人审批'},
				  {icon: 'line2_icon2.png', title: '审批稿', 'text': '审批草稿箱'},
				],
				usList:us.data,
				osList:os.data,
				msgCount:0,
				dot:{
				  mailHome:false
				},
        url: {
          menuList: '/customvideo/customVideoMenu/list',
          videoList: '/customvideo/customVideoInfo/list',
        },
        current: 1,
        pageSize: 30,
        total: 0,
        treeData: [],
        menuVisible: false,
        defaultMenuIndex: 0,
        menuIndex: 0,
        voList: [],
        tab: {
         value: undefined,
          idx: undefined
        },
        menu: {
         value: undefined
        },
        video: {
         preview: {
           id: undefined
         },
          dataSource: [],
          total: 0
        },
        ...configService,
        playId: undefined
			}
		},
    // onLoad:function(){
    //   //会员按钮显示
    //   this.$http.get(this.hyUrl, {}).then(res => {
    //     console.log(res)
    //     this.hytag = res?.data?.data || "1"
    //   })
    // },
    mounted:function (){
      this.$http.get(this.hyUrl, {}).then(res => {
        console.log("-------------"+res?.data?.data)
        this.hytag = res?.data?.data==0?"暂无权限":""
      })
    },
    computed: {

      tabChildren() {
        return (this.treeData.find(f => f.id === this.tab.value) || {}).children || []
      },
	  withPermission() {
	    return (this.treeData.find(f => f.id === this.tab.value) || {}).withPermission
	  },
      ...mapGetters(['token'])
    },
		methods: {

      playVideo(record) {
        console.log(record)
        if (!this.token) {
          this.$Router.replaceAll({name: 'login'})
          return
        }
        this.playId = record.id;
      },
      onTabChange(idx) {
        this.tab.value = this.treeData[idx].id;
        if (this.treeData[idx].children.length) {
          this.openMenu(this.treeData[idx].children[0])
        }
      },
      openMenu(record) {
        this.menu.value = record.id;
        this.getVideoList([record.id])
      },
      getMenuList() {
        this.$http.get(this.url.menuList).then(rs => {
          let res = rs.data;
          if (res.success) {
            this.treeData = res.result
            if (this.treeData) {
				const vipLevel = this.$store.getters?.userInfo?.vipLevel || ''
				this.treeData.forEach(item=>{
					item.withPermission = vipLevel.includes(item.title)
				})
              //限制父级不可编辑
              let menuIndex = ''
              let dFun = data => {
                data.map((item, index) => {
                  if (item.children && item.children.length > 0) {
                    item.disabled = true
                    dFun(item.children)
                  } else if (index == 0 && !menuIndex) {
                    menuIndex = [item.id]
                  }
                  return item
                })
                return data
              }
              dFun(this.treeData)
              this.$nextTick(() => {
                this.tab.idx = 0;
                this.defaultMenuIndex = menuIndex;
                this.tab.value = this.treeData[this.tab.idx].id
                this.getVideoList(menuIndex)
              })
              this.menuVisible = false
              this.$nextTick(() => {
                this.menuVisible = true
              })
            }
          }
        })
      },
      getVideoList(val) {
        if (!val.length) return
        this.menuIndex = val;
        this.menu.value = val[0]
        // console.log('=====', this.menuIndex)
        this.spinning = true
        let params = { customVideoMenuId: val[0], pageSize: this.pageSize, pageNo: this.current }
        this.$http.get(this.url.videoList, {params}).then(rs => {
          let res = rs.data;
          if (res.success) {
            this.spinning = false
            this.video.dataSource = res.result.records
            this.video.total = res.result.total
          }
        })
      },
			initMenu(){
				console.log("-----------home------------")
        this.onSocketOpen()
        this.onSocketReceive()
        // this.loadCount(0);
        this.getMenuList();
			},
			goPage(page){
				if(!page){
					return false;
				}
				if(page==='annotationList'){
				  this.msgCount = 0
				}
				this.dot[page]=false
				this.$Router.push({name: page})
			},
			// 启动webSocket
			onSocketOpen() {
				socket.init('websocket');
			},
			onSocketReceive() {
				var _this=this
				socket.acceptMessage = function(res){
					// console.log("页面收到的消息", res);
					if(res.cmd == "topic"){
					  //系统通知
					  _this.loadCount('1')
					}else if(res.cmd == "user"){
					  //用户消息
					  _this.loadCount('2')
					} else if(res.cmd == 'email'){
					 //邮件消息
					  _this.loadEmailCount()
					}
				}
			},
			loadCount(flag){
				console.log("loadCount::flag",flag)
				let url = '/sys/annountCement/listByUser';
				this.$http.get(url).then(res=>{
					console.log("res::",res)
				  if(res.data.success){
					let msg1Count = res.data.result.anntMsgTotal;
					let msg2Count = res.data.result.sysMsgTotal;
					this.msgCount = msg1Count + msg2Count
					console.log("this.msgCount",this.msgCount)
				  }
				})
			},
			loadEmailCount(){
				this.dot.mailHome = true
			},
			getTtemDotInfo(item){
				if(item.page==='annotationList' && this.msgCount>0){
				  return this.msgCount
				}
				return '';
			}
		}
	}
</script>

<style scoped lang="less">
	.cu-list.grid>.cu-item {
	  padding: 0px 0px;
    &:after {
      display: none;
    }
	}

  .line2-icon {
  width: 60px;
  height: 60px;
  }

  .cus-playfill {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 3 !important;
    color: #00000066 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0 !important;
    padding-bottom: 40px !important;
    font-size: 100px !important;
  }

</style>
